<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>

</style>
</head>
<body>
<style>
   .static{
      width:100px;
      height: 100px;
      border: 1px solid #000;
   }
   .bgcolor1{
      background-color:chocolate;
   }
   .bgcolor2{
      background-color: rgb(11, 7, 30);
   }

</style>
<div id="app">
   <div class="static" :class="clsObj"></div>
   <br>
   <div class="static" :class="clsObj2"></div>
</div>

<script>
const app = {
   data() {
      return {
         isActive:true,
         err:null
      }
   },
   computed:{
      clsObj(){
         console.log("1 && 1",1 && 1)
         console.log("0 && 1",0 && 1)
         return{
            bgcolor1: 0 && 1,
            bgcolor2: 1 && 1
         }
      },
      clsObj2(){
         console.log("this.err.type",)
         return{
            bgcolor1: this.isActive && !this.err,
            // this.err.type === "fatal" 这句是错的，
            // 之所以下面这行命令能执行，原因是 0代表false，在&&情况下，&&后面的内容就不会执行
            bgcolor2: 0 && this.err.type === "fatal"
         }
      }
   }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>
